<template>
	<view style="display: flex;flex-direction: column;min-height: 100vh;background-color: #F7F7F7;">
		<view style="width: 100%;padding: 20rpx;box-sizing: border-box;">
			<view
				style="width: 100%;box-sizing: border-box;padding: 20rpx;border-radius: 20rpx;background-color: #fff;">
				<view style="text-align: center;font-weight: bold;font-size: 5vw;">订单信息</view>
				<view v-if="data.status.code == 2">
					<u-alert title="订单已打印完成,请尽快前往取件,该订单将在48小时后自动完成!" type = "warning"></u-alert>
				</view>
				<view v-if="data.status.code == 4">
					<u-alert title="订单已配送完成,该订单将在48小时后自动完成!" type = "warning"></u-alert>
				</view>
				<view v-if="data.status.code == -1">
					<u-alert title="订单正在申请退款中,若商家未处理将在48小时后自动退款!" type = "warning"></u-alert>
				</view>
				<view>订单状态：{{data.status.desc}}</view>
				<view>订单编号：{{data.number}}</view>
				<view>订单类型：{{data.isSelfMention==1?"自提": "配送"}}</view>
				<view v-if="data.isSelfMention ==0" style="display: flex;">
					<view>收货地址：</view>
					<view style="flex: 1;display: flex;flex-direction: column;">
						<view style="display: flex;">
							<text style="margin-right: 10px;">{{data.address.name}}</text>
							<text>{{data.address.phoneNumber}}</text>
						</view>
						<view>{{data.address.address}}</view>
					</view>
				</view>
				<view v-else>
					<view>
						联系方式：<text
							style="margin-right: 10px;">{{data.orderContacts}}</text><text>{{data.phoneNumber}}</text>
					</view>
				</view>
				<view>下单时间：{{$u.timeFormat($timeStamp(data.createTime),'yyyy-mm-dd hh:MM:ss')}}</view>
			</view>
		</view>
		<view style="width: 100%;padding:0 20rpx 20rpx;box-sizing: border-box;">
			<view
				style="width: 100%;box-sizing: border-box;padding: 20rpx;border-radius: 20rpx;background-color: #fff;">
				<view style="display: flex;align-items: center;" @click="openFileClick(data.fileUrl)">
					上传附件：<u--text :text="data.fileName"></u--text>
				</view>
				<view style="display: flex;align-items: center;">
					打印范围：<u--text :text="data.pageNumber==0?'所有':data.pageNumber"></u--text>
				</view>

			</view>
		</view>
		<view style="width: 100%;padding:0 20rpx 20rpx;box-sizing: border-box;">
			<view
				style="display: flex;flex-direction: column;width: 100%;box-sizing: border-box;padding: 20rpx;border-radius: 20rpx;background-color: #fff;">
				<view style="display: flex;align-items: center;">
					<view style="flex: 1;display: flex;align-items: center;">
						<u-icon name="order" size="20"></u-icon>
						<view style="margin-right: 10px;">{{data.name}}</view>
						<view style="margin-right: 10px;">{{data.number}}</view>
						<view>{{data.isSelfMention ==1? "自提":"配送"}}</view>
					</view>
					<view>{{data.status.desc}}</view>
				</view>
				<view style="font-size: 3vw;">{{$u.timeFormat($timeStamp(data.createTime),'yyyy-mm-dd hh:MM:ss')}}
				</view>
				<view style="display: flex;" v-for="citem in data.storeOrderCommodityDetailsDTOList"
					:key="citem.commodityDetailsId">
					<image :src="citem.image?ptUrl+citem.image:'#'" style="flex-basis: 167.5rpx;height: 167.5rpx;">
					</image>
					<view
						style="flex: 1;display: flex;flex-direction: column;padding: 10px;box-sizing: border-box;overflow: hidden;">
						<view style="margin-bottom: 10px;">{{citem.commodityName}}</view>
						<view style="display: flex;" v-if="citem.isMultiSpecification ==1">
							<view v-for="gitem in citem.groupValueList" :key="gitem.groupValueId"
								style="margin-right: 10px;">
								<u-tag :text="gitem.groupValueName" color="rgba(0,0,0,0.7)" bgColor="#f7f7f7"
									borderColor="transparent"></u-tag>
							</view>
						</view>
						<view v-else style="display: flex;">
							<view style="margin-right: 10px;">
								<u-tag text="默认" color="rgba(0,0,0,0.7)" bgColor="#f7f7f7" borderColor="transparent">
								</u-tag>
							</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center;">
						<view>￥{{citem.unitPrice}}</view>
						<view>数量x{{citem.quantity}}</view>
					</view>
				</view>
				<view style="display: flex;justify-content: flex-end;margin: 10px 0;">
					<view style="margin-right: 10px;">配送￥{{data.isSelfMention==1?0: data.freight}}</view>
					<view>实付款￥{{data.allPrice}}</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;padding:0 20rpx 20rpx;box-sizing: border-box;">
			<view style="width: 100%;box-sizing: border-box;padding: 20rpx;border-radius: 20rpx;background-color: #fff;">
				<view v-for="o in data.orderStatusList" :key="o.id" style="display: flex;">
					<view v-if="o.changeType !=-1" style="display: flex;">
						<view>{{o.changeMessage.substr(0,4)}}：</view>
						<view>{{$u.timeFormat($timeStamp(o.changeTime),'yyyy-mm-dd hh:MM:ss')}}</view>
					</view>
					<view v-else style="display: flex;">
						<view>{{o.changeMessage.substr(2,4)}}：</view>
						<view style="display: flex;flex-direction: column;">
							<view>{{$u.timeFormat($timeStamp(o.changeTime),'yyyy-mm-dd hh:MM:ss')}}</view>
							<view>{{o.changeMessage.substr(7)}}</view>
						</view>
					
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;padding:0 20rpx 20rpx;box-sizing: border-box;" v-if="data.evaluateId">
			<view style="width: 100%;border-radius: 20rpx;background-color: #fff;">
				<u-cell-group :border="false">
					<u-cell :border="false" icon="edit-pen" title="订单评价详情" :isLink="true" @click="uCellClick"></u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	import Base64 from "@/utils/base64.js"
	import {
		ptUrl,
	} from '@/utils/env.js'
	export default {
		data() {
			return {
				ptUrl: ptUrl,
				data: {}
			}
		},
		onLoad(options) {
			// console.log(options)
			this.data = JSON.parse(options.data)
		},
		methods: {
			openFileClick(file) {
				console.log(file)
				let url = this.ptUrl + file;
				console.log(url)
				uni.navigateTo({
					url: '/pages/order/webView?link=' + encodeURIComponent(Base64.encode(url))
				});
			},
			uCellClick(){
				uni.navigateTo({
					url: '/pages/order/ShowOrderEvaluates?evaluate=' + JSON.stringify([{...this.data.evaluate,number:this.data.number}])
				});
			}
		}
	}
</script>

<style>
</style>
